<template>
  <div style="width: 100%">
    <div style="display: flex; margin-bottom: 100px">
      <div class="left"><MainLeft :x="currentIdx"></MainLeft></div>
      <div id="Echart" style="height: 100vh; width: 100%" ref="charts"></div>
    </div>
    <div class="center"><Barright></Barright></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Navigation from "@/components/Navigation";
import MainLeft from "../components/MainLeft.vue";
import Barright from "../components/Barright.vue";
export default {
  components: { Navigation, MainLeft, Barright },

  data() {
    return {
      input: "",
      currentIdx: 0,
    };
  },

  mounted() {
    var uploadedDataURL = "/json/Map.json";
    let myChart = echarts.init(document.getElementById("Echart"));
    const charts = echarts.init(this.$refs["charts"]);
    // var currentIdx = 0;
    const $ = window.$;
    //
    const this_ = this;
    function showProvince1() {
      var name = "总确诊人数";

      var data_arr = [
        { name: "成都市", value: 4977.0 },
        { name: "自贡市", value: 34 },
        { name: "攀枝花市", value: 21 },
        { name: "泸州市", value: 142 },
        { name: "德阳市", value: 263 },
        { name: "绵阳市", value: 229 },
        { name: "广元市", value: 45 },
        { name: "遂宁市", value: 171 },
        { name: "内江市", value: 382 },
        { name: "乐山市", value: 93 },
        { name: "南充市", value: 81 },
        { name: "眉山市", value: 109 },
        { name: "宜宾市", value: 313 },
        { name: "广安市", value: 297 },
        { name: "达州市", value: 49 },
        { name: "雅安市", value: 21 },
        { name: "巴中市", value: 113 },
        { name: "资阳市", value: 47 },
        { name: "阿坝藏族羌族自治州", value: 201 },
        { name: "甘孜藏族自治州", value: 102 },
        { name: "凉山彝族自治州", value: 117 },
        // 21  0-20
      ];

      $.get(uploadedDataURL, (geoJson) => {
        echarts.registerMap(name, geoJson);
        var option;
        var Color = [
          // "#fff",
          // "#fff",
          // "#fff",
          // "#fff",
          // "#fff",
          // "#fff",
          // "#fff",
          // "#fff",
          // "#FFF",
          // "#b4c8fd",
          // "#0048ff",
          // "#002ea2",
          // "#002ea2",
          // "#002ea2",
          // "#002ea2",
        ];
        charts.setOption(
          (option = {
            //背景颜色
            backgroundColor: "transparent",
            tooltip: {
              trigger: "item",
              backgroundColor: "rgba(255,255,255,0.9)",
              extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);",
            },
            visualMap: {
              show: false,
              min: 0,
              max: 100,
              realtime: false,
              calculable: false,
              inRange: {
                color: Color,
              },
            },
            // events: {
            //   // 'click' 事件处理函数
            //   click: this_.handleMapClick
            // },

            visualMap: {
              min: 0,
              max: 5000,
              right: 20,
              bottom: 150,
              showLabel: !0,
              text: ["高", "低"],
              pieces: [
                {
                  gte: 1000,
                  label: "> 1000人",
                  color: "#67000D",
                },
                {
                  gte: 300,
                  lte: 500,
                  label: "300 - 500 人",
                  color: "#CB181D",
                },
                {
                  gte: 150,
                  lt: 300,
                  label: "150 - 300人",
                  color: "#FB6A4A",
                },
                {
                  gt: 100,
                  lt: 200,
                  label: "100 - 200人",
                  color: "#FC9272",
                },
                {
                  gte: 0,
                  lt: 100,
                  label: "小于100人",
                  color: "#FEB6A6",
                },
              ],
              textStyle: {
                color: "#ffffff",
              },
              show: !0,
            },
          
            series: [
              {
                name: "总确诊人数(截至12月15日)",
                type: "map",
                top: 120,
                bottom: 80,
                zoom: 1.2, //这里是关键，一定要放在 series中
                mapType: name,
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                  emphasis: {
                    label: {
                      show: true,
                    },
                    textStyle: {
                      color: "rgba(255, 255, 255, 1)",
                      fontWeight: "bolder",
                    },
                  },
                },
                selectedMode: "false",
                itemStyle: {
                  normal: {
                    areaColor: Color[0],
                    borderColor: "#fff",
                  },
                  emphasis: {
                    areaColor: "#fecf4d", //鼠标滑过区域颜色
                    // areaColor: Color[0],
                    borderColor: "#cfe1ff",
                  },
                },
                data: data_arr,
              },
            ],
          })
        );
        charts.on("click", (params) => {
          //点击事件
          console.log("我被点击了", params);
          this_.currentIdx = params.dataIndex;
          // console.log(currentIdx);
        });
      });
    }
    showProvince1();
  },
};
</script>
<style scoped>
#Echart {
  margin-top: -60px;
  width: 20%;
  height: 100%;
  /* z-index: -100; */
}
.left {
  margin-left: 20px;
  width: 80%;
  height: 100%;
  margin-top: 60px;
}
.center {
  width: 100%;
  margin-left: 100px;
}
</style>
